<script setup>
	import { ref, reactive } from 'vue'
	import { useRouter } from 'vue-router'
	import { useStore } from 'vuex'
	import { ElMessage } from 'element-plus'
	import EventCenter from '/src/_util/publish-subscribe.js'
    import { login } from '/src/_http/api.js'
	
	const router = useRouter()
	const store = useStore()
	
	// 表单字段
	const formData = reactive({
		username: '',
		password: '',
	})
	// 表单字段验证规则
	const formDataRules = reactive({
		username: [
			{
				required: true,
				message: '请输入登录用户名',
				triggle: 'blur'
			}
		],
		password: [
			{
				required: true,
				message: '请输入登录密码',
				triggle: 'blur'
			}
		]
	})
	// 登录Form组件实例
	let loginForm = ref(null)
	// 按钮是否加载中
	let loginLoading = ref(false)
	// 是否记住我
	let isRemember = ref(false)
	
	
	const rememberMe = store.state.user.rememberMe == 1 ? true : false
	const memberAccount = store.state.user.rememberAccount
	isRemember.value = rememberMe
	if (memberAccount) {
		formData.username = memberAccount.username
		formData.password = memberAccount.password
	}
	
	
	// 点击重置按钮
	const clickResetBtn = function () {
		formData.username = ''
		formData.password = ''
		setTimeout(() => {
			loginForm.value.clearValidate('username')
			loginForm.value.clearValidate('password')
		}, 0)
	}
	// 点击登录按钮
    const clickLoginBtn = async function () {
		let valid = await loginForm.value.validate().catch(err => {})
		if (!valid) return
		
		loginLoading.value = true
        const [res, err] = await login({
            username: formData.username,
            password: formData.password
        })
		console.log('登陆结果', res)
		if (!res?.data?.data) {
			loginLoading.value = false
			return
		}
		ElMessage({
			message: res.data.message,
			type: 'success'
		})
		EventCenter.dispatchEvent('login', res.data.data.menus, res.data.data.permissions, res.data.data.userInfo)
		setTimeout(() => {
			router.push({ path: '/main' })
			loginLoading.value = false
		}, 100)
		
		
		store.commit('user/setRememberAccount', isRemember.value ? formData : null)
		store.commit('user/setRememberMe', isRemember.value ? 1 : 0)
    }
</script>

<template>
    <div class="login-wrap">
		<div class="bg-img"></div>
        <div class="content-container">
			<div class="system-title-wrap">
				<span>ZS-CMS内容管理系统</span>
			</div>
        	<div class="content-wrap">
        		<div class="avatar-wrap">
        			<el-avatar icon="UserFilled" :size="80" />
        		</div>
        		<div class="form-wrap">
        			<el-form
						ref="loginForm"
						:model="formData"
						:rules="formDataRules"
						:validate-on-rule-change="false"
					>
						<input class="none" type="password" />
        				<el-form-item prop="username">
        					<el-input
        						type="text"
        						v-model="formData.username"
        						placeholder="用户名"
        						prefix-icon="User"
        						size="large"
        					/>
        				</el-form-item>
        				<el-form-item prop="password">
        					<el-input 
        						type="password"
        						v-model="formData.password"
        						placeholder="密码"
        						prefix-icon="Lock"
        						show-password
        					/>
        				</el-form-item>
        			</el-form>
        		</div>
        		<div class="remember-forget-wrap">
        			<div class="remember-wrap">
        				<el-checkbox
        					v-model="isRemember"
        					:label="true"
        					size="large"
        				>记住我</el-checkbox>
        			</div>
        			<div class="forget-wrap">
        				<span>忘记密码?</span>
        			</div>
        		</div>
        		<div class="btn-wrap">
        			<el-button
        				size="large"
        				type="info"
        				round
        				@click="clickResetBtn"
        			>重置</el-button>
        			<el-button
        				size="large"
        				type="info"
        				round
        				:loading="loginLoading"
        				loading-icon="Loading"
        				@click="clickLoginBtn"
        			>登录</el-button>
        		</div>
        		<div class="regist-wrap">
        			<span>还没有账号? 立即注册</span>
        		</div>
        	</div>
        </div>
    </div>
</template>

<style scoped lang="less">
    .login-wrap {
        width: 100%;
		height: 100vh;
		overflow: hidden;
		position: relative;
		.bg-img {
			width: 100%;
			height: 100%;
			background-repeat: no-repeat;
			background-position: center center;
			background-size: cover;
			background-image: url('/src/assets/images/bg.jpg');
			position: absolute;
			top: 0;
			left: 0;
			z-index: 1;
			// filter: blur(5px);
			// transform: scale(1.05);
			// transform-origin: center center;
			&:before {
				content: '';
				width: 200%;
				height: 200%;
				position: absolute;
				top: 0;
				left: 0;
				bottom: 0;
				right: 0;
				background: rgba(0, 0, 0, 0.5);
				margin: auto;
			}
		}
		.content-container {
			width: 420px;
			height: auto;
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			z-index: 2;
			.system-title-wrap {
				color: #fff;
				font-size: 25px;
				padding-bottom: 20px;
				text-align: center;
			}
			.content-wrap {
				width: 100%;
				border: 1px solid #fff;
				border-radius: 20px;
				color: #fff;
				padding: 50px 30px;
				box-sizing: border-box;
				.avatar-wrap {
					.el-avatar {
						margin: 0 auto;
						background: #c0c8c7;
						border: 4px solid #fff;
						display: flex;
						justify-content: center;
						align-items: center;
					}
					:deep .el-avatar .el-icon,
					:deep .el-avatar .el-icon svg {
						width: 50px;
						height: 50px;
					}
				}
				.form-wrap {
					margin-top: 30px;
					:deep .el-form {
						.el-form-item .el-form-item__content {
							.el-input {
								.el-input__inner {
									background: transparent;
									border-radius: 100px;
									color: #fff;
									padding-left: 40px;
								}
								.el-input__prefix {
									color: #fff;
									left: 10px;
									.el-icon svg {
										font-size: 18px;
									}
								}
							}
						}
					}
				}
				.remember-forget-wrap {
					display: flex;
					align-items: center;
					justify-content: space-between;
					padding: 0 3px;
					.remember-wrap {
						display: flex;
						:deep .el-checkbox {
							height: unset;
						}
						:deep .el-checkbox .el-checkbox__label {
							margin-top: 1px;
							color: #fff;
						}
					}
					.forget-wrap {
						span {
							color: #fff;
							font-size: 14px;
							cursor: pointer;
						}
					}
				}
				.btn-wrap {
					margin-top: 20px;
					display: flex;
					align-items: center;
					justify-content: space-between;
					.el-button {
						flex: 1;
						background: rgba(255, 255, 255, 0.8);
						border: none;
						color: #00303b;
						font-size: 16px;
					}
				}
				.regist-wrap {
					margin-top: 50px;
					text-align: center;
					span {
						color: #ccc;
						font-size: 14px;
						text-decoration: underline;
						cursor: pointer;
					}
				}
			}
		}
    }
	
	@media screen and (max-width: 576px) {
		.login-wrap {
			.content-container {
				width: 95%;
				.content-wrap {
					padding: 30px 10px;
				}
			}
		}
	}
</style>